<template>
    <div class="InboundList-box">
        <!--入库单 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box" v-if="checkPermi(['system:inventory:edit'])">
            <el-button class="createBtn" @click="addInbound"><i class="iconfont icon-plus-square" />新增</el-button>
  

        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="total" :page="page" :limit="limit"
            :pageSize="pageSize" @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            @updatePage="updatePage" @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData"
            :tableData="inventoryTableData" @tableDetail="tableDetail">
        </forTableCom>
        <popUpsCom @popUpsFlase="popUpsFlase" v-if="popUps" :popTitle="popTitle" :disabled="disabled"
            @getoutboundOrderData="getoutboundOrderData" :PopData="PopData" :defindFlag="defindFlag" />
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import popUpsCom from './components/popUpsCom';
import { querySelectStockroomApi, deleteSelectStockroomApi } from '@/api/inventory';
import { ref, onMounted } from 'vue';
import { deletePopHook } from '@/hook/setPop/deletePop.js';
import { ElMessage, ElMessageBox } from 'element-plus'
import { sliceDate } from '@/utils/date.js'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { checkPermi } from "@/utils/permission.js";

let updatePop = updatePopHook()
let deletePop = deletePopHook()
// 入库信息
let popUps = ref(false)
// 详情禁用
let disabled = ref(false)
// 弹窗标题
let popTitle = ref('新增入库单信息')
// 控制确认按钮详情隐藏 控制数据是否回显
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref([])


let idActive = 'stockroomId'

// 表单
let inventoryForm = ref(
    {
        stockroomDate: '',    // 入库日期
        stockroomType: '',   // 入库类型
        stockroomId: '',     // 入库编号
        productName: ''      // 存货名称
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'stockroomDate',
        label: '入库日期',
        type: 'picker'
    },
    {
        name: 'stockroomType',
        label: '入库类型'
    },
    {
        name: 'stockroomId',
        label: '入库编号'
    },
    {
        name: 'productName',
        label: '存货名称'
    },
])
// 查询入库单数据
const queryInboundList = async (data = '') => {
    let res = await querySelectStockroomApi(data)
    let { code, rows } = res
    try {
        if (code == 200) {
            // 改变日期显示长度问题
            inventoryTableData.value = sliceDate(rows, 'stockroomDate')
        }
    } catch {

    }
}
// 查找
const onSearch = (v) => {
    queryInboundList(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let page = ref(1)
// 条数
let limit = ref(20)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'stockroomId',
        label: '入库编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'stockroomDate',
        label: '入库日期',
        colorClassName: 'activeColor'
    },
    {
        prop: 'stockroomType',
        label: '入库类型'
    },
    {
        prop: 'supplierName',
        label: '供应商名称'
    },
    {
        prop: 'totalPrice',
        label: '总金额'
    },
    {
        prop: 'stockroomWarehouse',
        label: '入库仓库'
    },
    {
        prop: 'purchaser',
        label: '采购人'
    },
])
// 表格数据内容
let inventoryTableData = ref([])

// 新增弹窗
const addInbound = () => {
    popTitle.value = '新增入库单信息'
    popUps.value = true
    disabled.value = false

}

// 详情双击行
const tableDetail = (props) => {

    disabled.value = true
    popUps.value = true
    popTitle.value = '入库单详情信息'
    defindFlag.value = false
    PopData.value = props
}
// 关闭数据页面
const popUpsFlase = (emit) => {
    popUps.value = emit
    defindFlag.value = true
}
// 勾选的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    console.log(v);
    limit.value = v.page.limit

    // let { page, limit } = v.page
    // pageNum.value = page
    // pageSize.value = limit
    // let obj = {
    //     pageNum: pageNum.value,
    //     pageSize: pageSize.value,
    // orderByColumn: idActive,
    //     isAsc: 'desc'
    // }
    // let params = Object.assign(obj, inventoryForm.value)
    // queryOutboundList(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}

// 获取最新的数据
const getoutboundOrderData = () => {
    // let params = {
    //     pageNum: pageNum.value,
    //     pageSize: pageSize.value,
    // orderByColumn: idActive,
    //     isAsc: 'desc'
    // }
    // queryInboundList(params)
    queryInboundList()
}

onMounted(() => {
    getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.InboundList-box {
    padding: 16px;


}
</style>
